/* 
 * 账号管理
 */
import React from 'react';
import { Rate, Icon, message } from 'antd';
import './account.css';

class Account extends React.Component {
    state = {
        user: {
            username: '小朱',
            createDate: '2015-01-25 11:50:22',
            realCheck: 1,
            level: 'middle',
            levelValue: 3,
            mobile: '13665546554',
            avatar: 'http://p1.music.126.net/Qu8yMNHD7FBMZaksWpzB9Q==/109951162987101253.jpg?param=500y500'
        }
    }
    changeMobile = () => {
        
        if (!this.state.user.mobile === '13858582838') {
            this.setState({
                user: Object.assign({}, this.state.user, {mobile: '13858582838'})
            }, () => {
                message.info('绑定手机修改成功！');
            })
        } else {
            this.setState({
                    user: Object.assign({}, this.state.user, {mobile: '13857572737'})
                }, () => {
                message.info('绑定手机修改成功！');
            })
        }
    }

    componentWillMount() {
        console.log('componentWillMount')
    }
    componentDidMount() {
        console.log('componentDidMount')
    }
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
    shouldComponentUpdate(nextProps, nextState) {
        
    }
    
    

    render() {
        return (
            <div className="page account">
                <div className="page-head">
                    <h3 className="page-title">账号管理</h3>
                </div> 
                <div className="account-wrap">
                    <div className="account-basic">
                        <div className="account-avatar"><img src={this.state.user.avatar} alt="头像" /></div>
                        <ul className="account-info">
                            <li><span>会员账号</span>：<span>{this.state.user.username}</span></li>
                            <li><span>认证状态</span>：<span>{this.state.user.realcheck === 1 ? '已认证' : '未认证'}</span></li>
                            <li><span>注册时间</span>：<span>{this.state.user.createDate}</span></li>                            
                        </ul>
                        <ul className="account-info">
                            <li><span>会员账号</span>：<span>{this.state.user.username}</span></li>
                            <li><span>认证状态</span>：<span>{this.state.user.realcheck === 1 ? '已认证' : '未认证'}</span></li>
                            <li><span>注册时间</span>：<span>{this.state.user.createDate}</span></li>                            
                        </ul>
                    </div>
                    <div className="account-basic level">
                        <div className="level-middle">当前账号安全程度</div>
                        <div className="process-bar">
                            <Rate disabled value={this.state.user.levelValue} />
                        </div>
                        <div className="level-middle">安全级别：中</div>
                    </div>
                    <div className="account-basic mobile"> 
                        <span>绑定手机号：{this.state.user.mobile}</span>
                        <div className="mobile-setting">
                            <span><Icon type="check-circle-o" />已设置</span>
                            |
                            <a onClick={this.changeMobile} style={{marginLeft: '10px'}}>修改</a>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Account;
